<template>
  <div class="model" v-if="courseList.length > 0">
    <div>
      <div class="toolItem">
        <svg class="icon-third" aria-hidden="true" style="font-size: 6px">
          <use xlink:href="#icon-third-tuijian3"></use>
        </svg>
        <span class="toolTitle">为您推荐</span>
      </div>
      <div class="flex">
        <CourseModel :data="courseList" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import CourseModel from "@/components/course/index/CourseModel.vue";
import { apiGetRecommendList } from "@/api/course";

const courseList = ref<any>([]); // 商品列表

const pageInfo = ref<{
  pageNo: number;
  pageSize: number;
  courseName: string;
}>({
  pageNo: 1,
  pageSize: 8,
  courseName: ""
});

onMounted(() => {
  getRecommendCourseList();
});

async function getRecommendCourseList() {
  const data: any = await apiGetRecommendList(pageInfo.value);
  courseList.value = data.result?.records;
}
</script>

<style scoped lang="scss">
@import "@/assets/style/course/global.scss";

.course-list {
  display: flex;
  width: 558px;
  flex-wrap: wrap;
}

.course-item {
  width: 278px;
  height: 277px;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
  border-right: 1.4px solid #e2e2e2;

  &:nth-of-type(3) {
    border-top: 1.4px solid #e2e2e2;
  }

  &:nth-of-type(4) {
    border-top: 1.4px solid #e2e2e2;
  }
}

.course-name {
  margin-top: 23px;
  font-size: 25px;
  font-weight: normal;
  line-height: 30px;
  text-align: center;
  letter-spacing: 0;
  color: #333333;
}

.course-img {
  width: 190px;
  height: 156px;
  margin-top: 19px;
  border-radius: 10px;
}

.course-desc {
  font-size: 14px;
  font-weight: normal;
  line-height: 17px;
  text-align: center;
  margin-top: 11px;
  letter-spacing: 0px;

  color: #333333;
}

.for-your {
  font-size: 35px;
  font-weight: normal;
  line-height: 42px;
  text-align: center;
  letter-spacing: 0px;
  margin-bottom: 32px;

  color: #333333;
}

.card,
.right-card {
  opacity: 1;
  background: #ffffff;
  border-radius: 10px;
  position: relative;
  box-shadow: 0px 1px 13px 0px #E5E5E5;

  &:hover {
    .setup-box {
      display: block;
    }
  }
}

.modal-tab-bar {
  > .flex {
    align-items: center;
    margin: 10px 0;
  }
}

.draggable {
  > .flex {
    align-items: center;
  }
}

.left {
  width: 346px;
  height: 554px;
  border-radius: 9.8px 0px 0px 9.8px;

  > img {
    max-width: 100%;
    height: 100%;
  }
}

.hot-list {
  width: 279px;
}

.hot-title {
  margin-left: 25px;
  line-height: 63px;
  font-size: 17px;
  font-weight: normal;

  letter-spacing: 0px;
  color: #333333;
  height: 63px;
}

.hot-item {
  cursor: pointer;
  box-sizing: border-box;
  border-top: 1.4px solid #e2e2e2;
  height: 122px;
  padding: 0 14px;
  align-items: center;

  &:hover {
    > .hot-course {
      > .hot-course-title {
        color: $theme_color;
      }
    }
  }

  > img {
    width: 76.3px;
    height: 77.7px;
  }
}

.hot-course {
  margin-left: 14px;
}

.hot-course-title {
  font-size: 13px;
  font-weight: normal;
  line-height: 16px;
  letter-spacing: 0px;

  color: #333333;
}

.hot-price {
  margin-top: 10.3px;
  font-size: 24px;
  font-weight: normal;
  line-height: 29px;
  letter-spacing: 0px;
  color: $theme_color;
}

.block {
  margin-top: 20px;
}

.toolItem {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.toolTitle {
  font-size: 16px;
  margin-left: 5px;
}
</style>
